<template>
    <div class="nav-item">
        <el-row :gutter="0">
            <el-col :xs="0" :sm="3" :md="4" :lg="5" :xl="6">
                <div class="grid-content"></div>
            </el-col>
            <el-col :xs="14" :sm="9" :md="8" :lg="7" :xl="6">
                <div class="grid-content">
                    <Navs />
                </div>
            </el-col>
            <el-col :xs="4" :sm="9" :md="8" :lg="7" :xl="6">
                <div class="grid-content">
                    <Search />
                </div>
            </el-col>
            <el-col :xs="6" :sm="3" :md="4" :lg="5" :xl="6">
                <div class="grid-content">
                    <UserState />
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
// 左侧导航
import Navs from 'comps/Navs.vue'
// 搜索栏
import Search from 'comps/Search.vue'
// 登录/退出
import UserState from 'comps/UserState.vue'

export default defineComponent({
    name: 'App',
    components: {
        Navs,
        Search,
        UserState
    },
    setup() {
        return {
            input: ref('')
        }
    }
})

</script>

<style scoped>
/*  */
.nav-item{
    border-bottom: 1px solid #f1f1f1;
    background: rgb(255, 255, 255);
}

</style>